<script setup>
import Position from '@/components/Position.vue'
import FooterBorder from '@/components/FooterBorder.vue'
import { ref } from 'vue'

// 创建一个 ref 来引用 iframe 元素
const iframeRef = ref(null);

// 切换全屏状态的方法
const toggleFullscreen = () => {
    const iframe = iframeRef.value;
    if (iframe) {
        if (!document.fullscreenElement) {
            // 进入全屏模式
            iframe.requestFullscreen().catch(err => {
                console.error('无法进入全屏模式:', err.message);
            });
        } else {
            // 退出全屏模式
            document.exitFullscreen();
        }
    } else {
        console.error('找不到 iframe 元素。');
    }
};
</script>


<template>
    <div class="content">
        <div class="top-image"></div>
        <!-- <div class="position">
            <div class="position-content">
                <div class="left">
                    <a class="bread" href="/home">
                        <span>首 页</span>
                    </a>
                    <span>布宫简介</span>
                </div>
                <div class="right">

                </div>
            </div>
        </div> -->
        <Position>
            <template #default>
                VR全景
            </template>
        </Position>
        <div class="container">
            <div class="bt">
                <a href="#">VR全景</a>
                <span></span>
            </div>

            <div>

            </div>
            <iframe ref="iframeRef" src="https://720.vrqjcs.com/t/3ebf485cf0e55384?s=1a43b4" width="100%" height="500px"
                frameborder="0"></iframe>

            <el-affix position="bottom" style="margin-left: 1050px;" :offset="50">
                <el-button type="danger" @click="toggleFullscreen">进入全屏</el-button>
            </el-affix>

        </div>
        <FooterBorder></FooterBorder>
    </div>
</template>

<style scoped>
.bt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    /* border: 2px solid #941200; */
    border-top: 2px solid #941200;
    border-bottom: 2px solid #941200;
    margin-bottom: 30px;
}

.bt>span {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-image: url('@/assets/more4.gif');
    background-position: center center;
    background-repeat: no-repeat;
}

.bt>a {
    text-decoration: none;
    color: #941200;
    /* background-color: #941200; */
    font-size: 18px;
    width: 96px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

p {
    line-height: 22px;
    color: #555555;
    font-size: 18px;
}

.line {
    height: 35px;
    border-top: 1px solid #888576;
    margin-top: 35px;
}

.top-image {
    height: 257px;
    background-image: url('@/assets/potala.jpg');
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-position: center center;
}

.container {
    width: 960px;
    margin: 0 auto;
    padding: 60px 0;
}
</style>